import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gluz/app/utils/colors.dart';

import '../../../../app_session.dart';
import '../controllers/profile_controller.dart';

class ProfileView extends GetView<ProfileController> {
  const ProfileView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.color_FAFAFA,
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        actions: [
          IconButton(
            onPressed: controller.navigateToSettings,
            iconSize: 20,
            icon: ImageIcon(AssetImage('assets/images/mine/mine_setting.png')),
          ),
        ],
      ),
      body: Stack(
        fit: StackFit.expand,
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Image.asset(controller.vipBgImage),
          ),
          RefreshIndicator(
            onRefresh: controller.loadUserData,
            child: SafeArea(
              child: GetBuilder<ProfileController>(
                builder: (controller) {
                  return ListView(
                    children: [
                      // 用户资料区域
                      _buildUserProfileSection(),

                      // 会员等级区域
                      _buildMembershipSection(),

                      // 功能网格区域
                      _buildFunctionGridSection(),

                      // 底部间距
                      SizedBox(height: 20.h),
                    ],
                  );
                }
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 用户资料区域
  Widget _buildUserProfileSection() {
    return InkWell(
      onTap: controller.onTapAuth,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 16.w),
        child: Row(
          children: [
            // 头像
            CircleAvatar(radius: 34, foregroundImage: CachedNetworkImageProvider(controller.userAvatar.value),),
            SizedBox(width: 12.w),
            // 用户信息
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 公司名称
                  Obx(
                    () => Text(
                      controller.userName.value,
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.w600,
                        color: Colors.black87,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),

                  SizedBox(height: 8.h),

                  // 认证徽章
                  Row(
                    children: [
                      // 已认证徽章
                      Container(
                        padding: EdgeInsets.only(right: 8),
                        decoration: BoxDecoration(
                          color: Colors.orange,
                          borderRadius: BorderRadius.circular(12.r),
                          border: Border.all(color: Colors.amber, width: 1),
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            // ImageIcon(AssetImage('assets/images/mine/mine_auth_logo.png'),),
                            Image.asset(width: 22, height: 22, 'assets/images/mine/mine_auth_logo.png'),
                            SizedBox(width: 4),
                            Text(
                              controller.authStatus.value,
                              style: TextStyle(
                                fontSize: 10.sp,
                                color: Colors.white,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 8.w),
                      // 运输公司徽章
                      Container(
                        padding: EdgeInsets.only(right: 8),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(12.r),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withAlpha(50),
                              blurRadius: 5,
                              offset: const Offset(0, 4),
                            ),
                          ],
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Image.asset(width: 22, height: 22, 'assets/images/mine/mine_identity_logo.png'),
                            SizedBox(width: 4.w),
                            Text(
                              '运输公司'.tr,
                              style: TextStyle(
                                fontSize: 10.sp,
                                color: Colors.grey,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 会员等级区域
  Widget _buildMembershipSection() {
    return SizedBox(
      height: app.isLangRU() ? 260 : 180,
      child: Stack(
        fit: StackFit.expand,
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
                margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16),
                child: Stack(
                  children: [
                    Image.asset(controller.vipCardImage),
                    if (controller.memberLevel > 0)
                      ...[
                        Positioned(
                          left: 16,
                          top: 20,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: [
                                  Stack(
                                    children: [
                                      Image.asset(width: 50, height: 25, 'assets/images/mine/mine_vip_lv_${controller.memberLevel.value}.png'),
                                      Positioned(
                                        left: 0,
                                        right: 0,
                                        top: 0,
                                        bottom: 0,
                                        child: Center(child: Text(controller.memberLevelString.value, textAlign: TextAlign.center, style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold, color: Colors.white))),
                                      ),

                                    ],
                                  ),
                                  Text(controller.memberType.value, textAlign: TextAlign.center, style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold, color: controller.memberLevel.value == 1 ? AppColors.color_904538 : Colors.white)),
                                ],
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 5),
                                width: 160,
                                height: 1,
                                decoration: BoxDecoration(
                                  color: controller.memberLevel.value == 1 ? AppColors.color_904538 : Colors.white,
                                  gradient: LinearGradient(colors: [
                                    controller.memberLevel.value == 1 ? AppColors.color_904538 : Colors.white,
                                    controller.memberLevel.value == 1 ? AppColors.color_904538.withAlpha(10) : Colors.white.withAlpha(10),
                                  ]),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 5),
                                child: Row(
                                  children: [
                                    Text(controller.memberExpiryDate.value, style: TextStyle(fontSize: 11, color: controller.memberLevel.value == 1 ? AppColors.color_904538 : Colors.white),),
                                    Text('到期'.tr, style: TextStyle(fontSize: 11, color: controller.memberLevel.value == 1 ? AppColors.color_904538 : Colors.white),),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ]
                  ],
                ),
            ),
          ),
          Positioned(
            top: 100,
            left: 0,
            right: 0,
            child: _buildFeatureCardsSection(),
          ),
        ],
      ),
    );
  }

  // 功能卡片区域
  Widget _buildFeatureCardsSection() {
    List<Widget> listWidget = [
      // 积分商城卡片
      Expanded(
        child: _buildFeatureCard(
          icon: Image.asset('assets/images/mine/mine_shop_icon.png'),
          title: '积分商城'.tr,
          titleArrow: Image.asset('assets/images/mine/mine_shop_arrow.png'),
          subtitle: '多种礼品等你兑换'.tr,
          iconColor: Colors.blue,
          onTap: () {
            controller.navigateToPointsMall();
          },
        ),
      ),

      if (app.isLangRU())
        SizedBox(height: 5),
      if (!app.isLangRU())
        SizedBox(width: 5),
      
      // 充值积分卡片
      Expanded(
        child: _buildFeatureCard(
          icon: Image.asset('assets/images/mine/mine_score_icon.png'),
          title: '充值积分'.tr,
          titleArrow: Image.asset('assets/images/mine/mine_score_arrow.png'),
          subtitle: '${'积分余额'.tr} ${controller.pointsBalance.value}',
          iconColor: Colors.orange,
          onTap: () {
            controller.navigateToRechargePoints();
          },
        ),
      ),
    ];
    return Container(
      margin: EdgeInsets.only(left: 16.w, right: 16.w),
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 8,
            offset: const Offset(0, -5),
          ),
        ],
      ),
      child: app.isLangRU()
          ? SizedBox(
            height: 140,
            child: Column(children: listWidget,),
          )
          : Row(children: listWidget,),
    );
  }

  // 功能卡片组件
  Widget _buildFeatureCard({
    required Widget icon,
    required String title,
    required Widget titleArrow,
    required String subtitle,
    required Color iconColor,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12.r),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 8,
              offset: const Offset(0, 0),
            ),
          ],
        ),
        child: Row(
          children: [
            // 图标
            Container(
              width: 40.w,
              height: 40.w,
              decoration: BoxDecoration(
                color: iconColor.withOpacity(0.1),
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: icon,
            ),

            SizedBox(width: 12.w),

            // 文字信息
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        title,
                        style: TextStyle(
                          fontSize: 14.sp,
                          fontWeight: FontWeight.w600,
                          color: Colors.black87,
                        ),
                      ),
                      Container(
                        width: 22,
                        height: 22,
                        child: titleArrow,
                      ),
                    ],
                  ),
                  Text(
                    subtitle,
                    style: TextStyle(fontSize: 10.sp, color: Colors.grey[600]),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 功能网格区域
  Widget _buildFunctionGridSection() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Wrap(
        spacing: 0, // 水平间距
        runSpacing: 20.h, // 垂直间距
        children: [
          // 第一行
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_release.png'),
            title: '我的发布'.tr,
            onTap: () {
              controller.navigateToMyPosts();
            },
          ),
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_invite.png'),
            title: '我的邀请'.tr,
            onTap: () {
              controller.navigateToMyInvitations();
            },
          ),
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_collect.png'),
            title: '我的收藏'.tr,
            onTap: () {
              controller.navigateToMyFavorites();
            },
          ),
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_order.png'),
            title: '服务订单'.tr,
            onTap: () {
              controller.navigateToServiceOrders();
            },
          ),
          // 第二行
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_auth.png'),
            title: '身份认证'.tr,
            onTap: () {
              controller.navigateToIdentityVerification();
            },
          ),
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_server.png'),
            title: '我的客服'.tr,
            onTap: () {
              controller.navigateToCustomerService();
            },
          ),
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_feedback.png'),
            title: '投诉建议'.tr,
            onTap: () {
              controller.navigateToComplaintsSuggestions();
            },
          ),
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_score.png'),
            title: '积分账单'.tr,
            onTap: () {
              controller.navigateToPointsBill();
            },
          ),
          // 第三行
          _buildGridItem(
            icon: Image.asset('assets/images/mine/mine_item_video.png'),
            title: '视频教程'.tr,
            onTap: () {
              controller.navigateToVideoTutorials();
            },
          ),
        ],
      ),
    );
  }

  // 网格项组件
  Widget _buildGridItem({
    required Widget icon,
    required String title,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: SizedBox(
        width: (Get.width - 32.w - 30.w) / 4, // 计算每个项目的宽度：(屏幕宽度 - 左右边距 - 容器内边距) / 4
        child: Column(
          children: [
            // 图标容器
            Stack(
              children: [
                SizedBox(
                  width: 50.w,
                  height: 50.w,
                  child: icon,
                ),
              ],
            ),

            // 标题
            Text(
              title,
              style: TextStyle(
                fontSize: 12.sp,
                color: Colors.black87,
                fontWeight: FontWeight.w500,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}
